// 找茬区域数据，这里简单示例，可根据实际图片调整
const differences = [
    { x1: 100, y1: 100, width: 50, height: 50, x2: 100, y2: 100 },
    { x1: 200, y1: 200, width: 50, height: 50, x2: 200, y2: 200 }
];

// 得分
let score = 0;
const scoreElement = document.getElementById('score');

// 获取图片元素
const image1 = document.getElementById('image1');
const image2 = document.getElementById('image2');

// 处理点击事件
function handleClick(event) {
    const target = event.target;
    const rect = target.getBoundingClientRect();
    const clickX = event.clientX - rect.left;
    const clickY = event.clientY - rect.top;

    for (let i = 0; i < differences.length; i++) {
        const diff = differences[i];
        if (target === image1) {
            if (
                clickX >= diff.x1 &&
                clickX <= diff.x1 + diff.width &&
                clickY >= diff.y1 &&
                clickY <= diff.y1 + diff.height
            ) {
                markDifference(diff, target);
                score++;
                scoreElement.textContent = score;
                differences.splice(i, 1);
                if (differences.length === 0) {
                    alert('恭喜你，全部找茬成功！');
                }
                break;
            }
        } else if (target === image2) {
            if (
                clickX >= diff.x2 &&
                clickX <= diff.x2 + diff.width &&
                clickY >= diff.y2 &&
                clickY <= diff.y2 + diff.height
            ) {
                markDifference(diff, target);
                score++;
                scoreElement.textContent = score;
                differences.splice(i, 1);
                if (differences.length === 0) {
                    alert('恭喜你，全部找茬成功！');
                }
                break;
            }
        }
    }
}

// 标记差异区域
function markDifference(diff, target) {
    const marker = document.createElement('div');
    marker.style.position = 'absolute';
    if (target === image1) {
        marker.style.left = diff.x1 + 'px';
        marker.style.top = diff.y1 + 'px';
    } else {
        marker.style.left = diff.x2 + 'px';
        marker.style.top = diff.y2 + 'px';
    }
    marker.style.width = diff.width + 'px';
    marker.style.height = diff.height + 'px';
    marker.style.border = '2px solid red';
    target.parentNode.appendChild(marker);
}

// 添加点击事件监听器
image1.addEventListener('click', handleClick);
image2.addEventListener('click', handleClick);